<template>
    <div id="login">
      <!--头部-->
      <div id="navbar">
        <div @click="returnPro"><img src="../../assets/imgs/login/close.png" alt=""></div>
        <div id="tit">{{loginTxt(phoneLogin)}}</div>
        <div id="tit2" @click="change">{{loginTxt(!phoneLogin)}}</div>
      </div>
      <!--logo-->
      <img class="logo" v-if="!pwdBarBlur" src="../../assets/imgs/login/login-logo.png" alt="">
      <img class="logo" v-else src="../../assets/imgs/login/login-logo2.png" alt="">
      <!--1.为手机登录时-->
      <div v-show="phoneLogin" id="phone-login">
        <div id="CN">
          <div>中国大陆</div>
          <img src="../../assets/imgs/login/箭头.png" alt="">
        </div>
        <div id="phone-bar">
          <div>+86</div>
          <input v-model="$store.state.phone" :style="{'color':(inputPhone? 'black':'deeppink')}" type="text" placeholder="请输入常用的手机号">
          <div id="btntxt" @click="sendcode" :style="{'color':(inputPhone? '#84cbff':'#7c7c7c')}">{{btntxt}}</div>
        </div>
        <div id="code">
          <input v-model="code" type="text" placeholder="请输入验证码">
        </div>
        <div class="attention">
        <div @click="check=!check">
          <img v-show="check" src="../../assets/imgs/login/gouxuan.png" alt="">
          <img v-show="!check" src="../../assets/imgs/login/weixuan.png" alt="">
        </div>
        首次关注"哔哩哔哩漫画"官方号 送5张漫读券
      </div>
        <div class="loginbtn" @click="loginTrue" :style="{'background-color':(btnState? '#12B7F5':'#84cbff')}">
          登录/注册
        </div>
        <div class="biliLogin">
          <img src="../../assets/imgs/login/login-app.png" alt="">
        </div>
        <!--底部-->
        <div class="agreement">
          未注册过哔哩哔哩的手机号，我们将自动帮你注册账号
          登录或完成注册即同意"<span>用户协议</span>"与"<span>隐私条款</span>"
        </div>
      </div>
      <!--2.为密码登录时-->
      <div v-show="!phoneLogin" id="pwd-login">
        <div class="ID txtinput">
          <input v-model="biliID" type="text" placeholder="请输入bilibili账号">
        </div>
        <div class="pwd txtinput">
          <input v-model="biliPWD" @blur="barBlur" @focus="barFocus" type="password" placeholder="密码">
          <div>忘记密码?</div>
        </div>
        <div class="attention" id="pwdLogin-attention">
          <div @click="check=!check">
            <img v-show="check" src="../../assets/imgs/login/gouxuan.png" alt="">
            <img v-show="!check" src="../../assets/imgs/login/weixuan.png" alt="">
          </div>
          首次关注"哔哩哔哩漫画"官方号 送5张漫读券
        </div>
        <div class="loginbtn" :style="{'background-color':(btnState2? '#12B7F5':'#84cbff')}">
          登录
        </div>
        <div class="IDbtn" @click="change">注册账号</div>
        <div class="biliLogin">
          <img src="../../assets/imgs/login/login-app.png" alt="">
        </div>
        <div class="agreement">
          登录即同意"<span>用户协议</span>"与"<span>隐私条款</span>"
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return{
            titTxt:'手机登录注册',
            titTxt2:'密码登录',
            phoneLogin:true,       //登录方式
            btnLogin:false,        //登录按钮状态
            btnLogin2:false,        //密码登录时登录按钮状态
            biliID:'',              //密码登录的账号
            biliPWD:'',              //密码登录的密码
            phoneColor:'deeppink',  //号码框字体颜色
            // phone:'',               //手机号
            code:'',                //验证码
            check:true,              //勾选关注
            btntxt:'获取验证码',
            phoneTF:false,           //手机号是否合法
            pwdBarBlur:false,         //密码框状态
            // logo1:'/static/img/login-logo.6b08744.png',
            // logo2:'/static/img/login-logo2.a3a5f4c.png'
          }
      },
      computed:{
          loginTxt(){     //当前登录方式
            return (login)=>{
              return login? this.titTxt:this.titTxt2;
            }
          },
        btnState(){       //登录按钮状态  两个框均不为空时 改变登录按钮的状态
            if(this.$store.state.phone!= ''&&this.code!=''){
              this.btnLogin = true
              return true
            }else{
              this.btnLogin = false
              return false
            }
        },
        btnState2(){
          if(this.biliID!= ''&&this.biliPWD!=''){
            this.btnLogin2 = true
            return true
          }else{
            this.btnLogin2 = false
            return false
          }
        },
        inputPhone(){     //判断手机号是否合法
          var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
          return reg.test(this.$store.state.phone)? this.phoneTF=true:this.phoneTF=false
        },
        // logo(){
        //     return this.pwdBarBlur? this.logo2:this.logo1
        // }
      },
      methods: {
        change() {   //切换登录方式
          return this.phoneLogin = !this.phoneLogin;
        },
        returnPro() {
          this.$router.replace('/profile')
        },
        //验证码
        sendcode() {
          if (!this.phoneTF) {
            //手机号错误时点获取验证码无反馈
          } else {
            //正确时
            this.time = 60;
            this.disabled = true;
            this.timer();
          }
        },
        timer() {
          if (this.time > 0) {
            this.time--;
            this.btntxt = this.time + "s后重新获取";
            setTimeout(this.timer, 1000);
          } else {
            this.time = 0;
            this.btntxt = "获取验证码";
            this.disabled = false;
          }
        },
        barBlur(){  //失去焦点时
          this.pwdBarBlur = false
          // console.log(this.pwdBarBlur);
        },
        barFocus(){ //获取焦点时
          this.pwdBarBlur = true
          // console.log(this.pwdBarBlur);
        },
        loginTrue(){ //登陆成功
          // (this.phoneTF&&this.btnLogin)||(this.phoneTF&&this.btnLogin2)
          if(this.phoneTF&&this.btnLogin){
            //手机号码正确时并且验证码框不为空时则登录成功
            this.$store.state.isLogin = true
            // console.log(this.$store.state.isLogin);
            this.returnPro()

          }
        }
      }
    }
</script>

<style scoped>
@import "../../assets/css/login/login.css";

</style>
